<template>
  <div>
    <el-input v-model="value" v-if="isDetail" :readonly="readonly" />
    <p v-else>{{ value }}</p>
  </div>
</template>

<script>
export default {
  name: "relationFormAttrxy",
  // props: ["showField", "relationField", "isDetail", "readonly"],
  props: {
    showField: {
      type: String,
      required: true,
    },
    relationField: {
      type: String,
      required: true,
    },
    //是否显示input框
    isDetail: {
      type: Boolean,
      default: true,
    },
    //是否可编辑
    readonly: {
      type: Boolean,
      default: false,
    },
    // 当需要手动修改relationfromxy时使用
    model: {
      default: "",
    },
  },

  data() {
    return {
      value: "",
      obj: {},
    };
  },

  computed: {
    relationData() {
      return this.$store.state.generator.relationData;
    },
  },

  watch: {
    relationData: {
      handler(val) {
        if (!this.showField || !this.relationField) return;
        this.obj = val[this.relationField] || {};
        this.value = this.obj[this.showField] ? this.obj[this.showField] : "";
        if (this.value instanceof Array) {
          this.value = this.value.toString();
        }
        if (this.model) {
          this.value = this.model;
        }
        this.$emit("input", this.value);
      },
      deep: true,
    },
    value(newval) {
      //
      // this.$set(this.obj, this.showField, this.value);
      // this.$set(this.relationData, this.relationField, this.obj);
      // this.$store.commit("generator/UPDATE_RELATION_DATA", this.relationData);
      this.$emit("input", newval);
    },
    // module: {
    //   handler(newmodel) {
    //
    //     // this.value = newmodel;
    //   },
    //   immediate: true,
    //   deep: true,
    //   //
    //   // this.value = newmodel;
    // },
  },
};
</script>